import React from 'react';
import './index.css'
import {connect} from 'react-redux';
import {rank} from '../../store/rank.redux'
import Loading from '../../base/Loading';
@connect(
  (state)=>({
    data:state.rank.data
  }),
  {
    rank
  }
)
class Rank extends React.Component{
  constructor(props){
    super(props);
  }
  componentDidMount(){
    this.props.rank();
  }
  render(){
    return (
      <div className="rank">
        {
          this.props.data.length>0 ? (
            <ul>
              {this.props.data.map(value=>(
              <a key={value.id} href={`/songList/${value.id}`}>
                <li>
                  <p className="ph_img">
                    <img src={value.picUrl}/>
                    <span className="iconfont icon-erji">{value.listenCount>10000?parseInt(value.listenCount/10000)+'万':value.listenCount}</span>
                  </p>
                  <div className="ph_song_list">
                    <span className="iconfont icon-you icon-rank"></span>
                    <h2>{value.title}</h2>
                    {
                      value.songList.map(song=>(
                        <p key={song.number}>
                          {song.number}
                          <span>{song.songName}</span> -{song.singerName}
                        </p>
                      ))
                    }
                  </div>
                </li>
              </a>
              ))}
            </ul>
          ):<Loading title="加载中......"></Loading>
        }
    </div>
    )
  }
}

export default  Rank;